<template>
  <div>
    <a-row
      style="padding:15px;padding-bottom:0"
      :gutter="24">
      <a-col
        :sm="24"
        :md="12"
        :xl="6"
        :style="{ marginBottom: '24px' }">
        <chart-card
          :loading="loading"
          title="企业数"
          :total="headData.enterpriseUserNum?headData.enterpriseUserNum:0">
          <template slot="footer">
            有订单企业
            <span>{{ headData.enterpriseOrderUserNum?headData.enterpriseOrderUserNum:0 }}</span>
          </template>
        </chart-card>
      </a-col>
      <a-col
        :sm="24"
        :md="12"
        :xl="6"
        :style="{ marginBottom: '24px' }">
        <chart-card
          :loading="loading"
          title="众包人员"
          :total="headData.individualUserNum?headData.individualUserNum:0">
          <!-- <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o"/>
          </a-tooltip>-->
          <!-- <div>
            <mini-area/>
          </div>-->
          <template slot="footer">
            完成签约
            <span>{{ headData.individualSignUserNum?headData.individualSignUserNum:0 }}</span>
          </template>
        </chart-card>
      </a-col>
      <a-col
        :sm="24"
        :md="12"
        :xl="6"
        :style="{ marginBottom: '24px' }">
        <chart-card
          :loading="loading"
          title="本月新增项目"
          :total="headData.projectThisMonthNum?headData.projectThisMonthNum:0">
          <template slot="footer">
            项目总数
            <span>{{ headData.projectNum?headData.projectNum:0 }}</span>
          </template>
        </chart-card>
      </a-col>
      <a-col
        :sm="24"
        :md="12"
        :xl="6"
        :style="{ marginBottom: '24px' }">
        <chart-card
          :loading="loading"
          title="本月下发金额"
          :total="headData.issueThisMonthNum?headData.issueThisMonthNum:0 | formatMoney ">
          <template slot="footer">
            累计下发金额
            <span>{{ headData.issueNum?headData.issueNum:0 | formatMoney }}</span>
          </template>
        </chart-card>
      </a-col>
    </a-row>
    <a-row
      style="padding:26px;padding-top:0"
      :gutter="24">
      <div class="salesCard">
        <a-tabs
          default-active-key="1"
          :animated="loading"
          :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div
            class="extra-wrapper"
            slot="tabBarExtraContent">
            <div class="extra-item">
              <!-- <a>今日</a>
              <a>本周</a>-->
              <a
                :class="{'active1':isActive1==0}"
                @click="changeTopType(0)">本月</a>
              <a
                :class="{'active1':isActive1==1}"
                @click="changeTopType(1)">本年</a>
            </div>
            <a-range-picker
              @change="onChangeTop"
              :style="{width: '256px'}"/>
          </div>
          <a-tab-pane
            tab="订单数据总览"
            key="1">
            <a-row>
              <a-col
                :xl="16"
                :lg="12"
                :md="12"
                :sm="24"
                :xs="24">
                <div
                  id="myChart01"
                  :style="{width: '100%', height: '254px'}"></div>
              </a-col>
              <a-col
                :xl="8"
                :lg="12"
                :md="12"
                :sm="24"
                :xs="24">
                <a-card
                  :loading="loading02"
                  :bordered="false"
                  :body-style="{padding: '0'}">
<!--                  <rank-list-->
<!--                    title="企业订单金额TOP"-->
<!--                    :list="rankList"/>-->
                </a-card>
                <a-table
                    ref="table"
                    size="small"
                    :rowKey="(record, index)=> index"
                    :columns="columns"
                    :data-source="rankList"
                    :pagination="pagination"
                ></a-table>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-row>
    <a-row
      style="padding:26px;padding-top:0"
      :gutter="24">
      <a-card
        :loading="loading"
        :bordered="false"
        :body-style="{padding: '0'}">
        <div class="salesCard">
          <a-tabs
            default-active-key="1"
            :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}"
          >
            <div
              class="extra-wrapper"
              slot="tabBarExtraContent">
              <div class="extra-item">
                <!-- <a>今日</a>
                <a>本周</a>-->
                <a
                  :class="{'active2':isActive2==0}"
                  @click="changeBottomType(0)">本月</a>
                <a
                  :class="{'active2':isActive2==1}"
                  @click="changeBottomType(1)">本年</a>
              </div>
              <a-range-picker
                @change="onChangeBottom"
                :style="{width: '256px'}"/>
            </div>
            <a-tab-pane
              tab="企业订单数据"
              key="1">
              <a-row>
                <a-col
                  style="position:relative;"
                  :loading="loading"
                  :xl="24"
                  :lg="24"
                  :md="24"
                  :sm="24"
                  :xs="24">
                  <!-- <bar :data="barData2" title="销售额趋势"/> -->
                  <div
                    id="myChart"
                    :style="{width: '100%', height: '254px' }"></div>
                  <div class="bartools">
                    <a @click="bottomSort(0)">正序</a>
                    <a-divider type="vertical"/>
                    <a @click="bottomSort(1)">倒序</a>
                  </div>
                </a-col>
              </a-row>
              <a-row style="text-align:right;margin-bottom:35px">
                <a-pagination
                  show-size-changer
                  :default-current="1"
                  :total="totalElements"
                  @change="onChangePages"
                  @showSizeChange="onShowSizeChange"
                />
              </a-row>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-card>
    </a-row>
  </div>
</template>

<script>
import moment from 'moment'
import { formatMoney } from '@/utils/util'
import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  RankList,
  Bar,
  Trend,
  NumberInfo,
  MiniSmoothArea
} from '@/components'
const rankList = []
const barData = []
const barData2 = []

import { getHeadInfo, getEnOrderInfo, getOrderInfo, getOrderRanking } from '@/api/manage'
export default {
  components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    NumberInfo,
    MiniSmoothArea
  },
  data() {
    return {
      pagination: {
        total: 0,
        defaultPageSize: 5,
        // showTotal: total => `共 ${total} 条数据`,
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '15', '20'],
        onShowSizeChange: (current, pageSize) => this.pageSize = pageSize
      },
      columns: [
        {
          title: '企业名称',
          dataIndex: 'name',
        },
        {
          title: '金额',
          dataIndex: 'total',
        }
      ],
      isActive1:2,
      isActive2:2,
      loading: false,
      loading01: false,
      loading02: false,
      barData,
      barData2,
      rankList,
      pageSize: 20,
      current: 4,
      headData: {},
      topData: {
        end: '',
        start: '',
        type: 0
      },
      bottomData: {
        pageNumber: 1,
        pageSize: 10,
        properties: 'num',
        type: 0,
        direction: 'ASC',
        end: '',
        start: ''
      },
      totalElements: 0
    }
  },
  watch: {
    pageSize(val) {},
    current(val) {}
  },
  created() {
    this.getStartData()
  },
  // mounted(){
  //   this.drawLine()
  // },
  methods: {
    bottomSort(type){
      if(type===0){
        this.bottomData.direction = 'ASC'
      }else{
        this.bottomData.direction = 'DESC'
      }
      this.getOrderInfoBottom()
    },
    onChangeBottom(date, dateString) {
      if (dateString[1] && dateString[0]) {
        delete this.bottomData.type
      } else {
        this.bottomData.type = 0
      }
      this.bottomData.end = dateString[1]
      this.bottomData.start = dateString[0]
      this.getOrderInfoBottom()
    },
    onChangeTop(date, dateString) {
      this.loading01 = true
      this.loading02 = true
      if (dateString[1] && dateString[0]) {
        delete this.topData.type
      } else {
        this.topData.type = 0
      }
      this.topData.end = dateString[1]
      this.topData.start = dateString[0]
      this.getOrderInfoTop()
      this.getOrderRanking()
    },
    onShowSizeChange(current, pageSize) {
      this.bottomData.pageNumber = current
      this.bottomData.pageSize = pageSize
      this.getOrderInfoBottom()
    },
    onChangePages(pageNumber) {
      this.bottomData.pageNumber = pageNumber
      this.getOrderInfoBottom()
    },
    getStartData() {
      getHeadInfo('').then(res => {
        this.headData = res.resData
      })
      //top
      this.getOrderInfoTop()
      this.getOrderRanking()
      //bottom
      this.getOrderInfoBottom()
    },
    changeTopType(type) {
      this.loading01 = true
      this.loading02 = true
      this.topData.type = type
      this.isActive1 = type
      this.getOrderInfoTop()
      this.getOrderRanking()
    },
    changeBottomType(type) {
      this.bottomData.type = type
      this.isActive2 = type
      this.getOrderInfoBottom()
    },
    getOrderInfoBottom() {
      getEnOrderInfo(Object.assign({}, this.bottomData)).then(res => {
        const xdata = []
        const sdata = []
        for (let i = 0; i < res.resData.content.length; i += 1) {
          xdata.push(res.resData.content[i]['name'])
          sdata.push(res.resData.content[i]['num']/100)
        }
        this.totalElements = res.resData.totalElements

        this.drawLine(xdata, sdata)
      })
    },
    getOrderInfoTop() {
      getOrderInfo(Object.assign({}, this.topData)).then(res => {
        const xdata = []
        const sdata = []
        for (let i = 0; i < res.resData.length; i += 1) {
          xdata.push(res.resData[i]['date'])
          sdata.push(res.resData[i]['num']/100)
        }

        this.drawZLine(xdata, sdata)
      })
    },
    getOrderRanking() {
      getOrderRanking(Object.assign({}, this.topData)).then(res => {
        const rankList = []
        for (let i = 0; i < res.resData.length; i++) {
          rankList.push({
            name: res.resData[i].name,
            total: formatMoney(res.resData[i].num)
          })
        }
        this.loading02 = false
        this.rankList = rankList
      })
    },
    drawLine(xdata, sdata) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        color: ['#33ABFB'],
        title: { text: '   订单金额统计数据' },
        tooltip: {},
        xAxis: {
          data: xdata
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            data: sdata
          }
        ]
      })
    },
    drawZLine(xdata, sdata) {
      const myChart = this.$echarts.init(document.getElementById('myChart01'))
      // 绘制图表
      myChart.setOption({
        color: ['#FACC14'],
        title: { text: '   订单金额统计数据' },
        tooltip: {},
        xAxis: {
          data: xdata
        },
        yAxis: {},
        series: [
          {
            type: 'line',
            data: sdata
          }
        ]
      })
      this.loading01 = false
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-tabs-nav .ant-tabs-tab-active {
  font-size: 18px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.85);
  line-height: 24px;
  padding-left: 0;
}
/deep/ .ant-tabs-ink-bar{
  background:none
}
.bartools{
  position: absolute;
  top: 3px;
  left: 190px;
}
.salesCard {
  background: #fff;

}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
      color: #333333;
    }
  }
}

.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
}

.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);
  /deep/ .ant-card-head {
    position: relative;
  }
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: color 0.32s;
    color: black;
  }
}
.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}
.active1,.active2{
  color:#1890ff !important;
}
</style>
